<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>百度新闻</title>

    <link rel="stylesheet" href="./百度新闻首页.css">
</head>

<body>
    <div style="height: 32px;">
        <div class="clearfix">
            <div class="fix-right">
                <ul class="clear-right-ul">
                    <li><a href="#">wu13193596738</a>
                        <span class="right-none">
                            <p><a href="#">账号设置</a></p>
                            <p><a href="#">推出</a></p>
                        </span>
                    </li>
                    <li><a href="#">百度首页</a></li>
                </ul>
            </div>
            <ul class="fix-left">
                <li><a href="#">网页</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">贴吧</a></li>
                <li><a href="#">知道</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">图片</a></li>
                <li><a href="#">视频</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">文库</a></li>
            </ul>

        </div>
    </div>
    <div class="hear w">
        <div class="hear-left">
            <a href="#">
                <img style="width: 100%;" src="	https://news-bos.cdn.bcebos.com/mvideo/log-news.png" alt="">
            </a>
        </div>
        <div class="hear-right">
                <input type="text">
            <span>
                百度一下
            </span>
            <a style="font-size: 13px;color: rgb(51, 51, 51);" href="#">帮助</a>
        </div>
    </div>
    <div id="wrap">
        <nav>
            <ul id="content">
                <li id="active"><a href="#">首页</a></li>
                <li><a href="#">国内</a></li>
                <li><a href="#">国际</a></li>
                <li><a href="#">军事</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">互联网</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">游戏</a></li>
                <li><a href="#">女人</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">房产</a></li>
                <li><a href="#">个人推荐</a></li>
            </ul>
            <div id="move"></div>
        </nav>
    </div>
    <div class="bigBox"></div>
    <ul class="ceBox">
        <li></li>
        <li><a href="">辟谣</a></li>
        <li><a href="">举报</a></li>
        <li style="height: 50px;"><a href="">收藏本站</a></li>
        <li><a href="">搜索</a></li>
        <li><a href="">反馈</a></li>
        <li id="none-return"></li>
    </ul>
</body>

<script>

    //获取元素

    var content = document.getElementById('content');
    var lis = content.children;
    var move = document.getElementById('move');
    var active = document.getElementById('active');
    var wrapClass = document.querySelector('#wrap');
    var noneReturn = document.querySelector('#none-return');
    var ceBox = document.querySelector('.ceBox')
    // console.log(noneReturn);



    //设置滑块初始宽以及水平偏移值

    move.style.width = active.offsetWidth + 'px';
    move.style.left = active.offsetLeft + 'px';

    var key = 0
    var widthOf, leftOf;
    for (var i = 0; i < lis.length; i++) {
        //鼠标移入事件onmouseover

        lis[i].onmouseover = function () {
            move.style.width = this.offsetWidth + 'px';
            move.style.left = this.offsetLeft + 'px';
        }
        lis[i].onclick = function () {

            widthOf = move.style.width//元素宽度
            leftOf = this.offsetLeft//偏移量

            move.style.width = widthOf + 'px';
            move.style.left = leftOf + 'px';

            key = 1;
        }

        //鼠标离开时间onmouseout

        lis[i].onmouseout = function () {
            if (key == 0) {
                move.style.width = active.offsetWidth + 'px';
                move.style.left = active.offsetLeft + 'px';
            } else {
                move.style.width = widthOf + 'px';
                move.style.left = leftOf + 'px';
            }
        }
    }
    window.addEventListener('scroll',function(){
    //    console.log('',document.documentElement.scrollTop);
    let windScroTop = Math.floor(document.documentElement.scrollTop);
    let wrapTop = Math.floor(wrapClass.offsetTop)
        if(windScroTop > wrapTop){
            wrapClass.className = 'posFixed'
            noneReturn.style.height = '48px';
            // console.log('',noneReturn.style.height);
            ceBox.style.top = '390px'
            noneReturn.onclick = function(){
                document.documentElement.scrollTop = 0;
    }
        }else{
            wrapClass.className = '';
            ceBox.style.top = '';
            noneReturn.style.height = '';
            // console.log('',wrapTop);
        }
    })
    // console.log('',wrapClass.offsetTop);
   
</script>

</html>